<template>
  <view style="width: 95%;margin-left: 28rpx; " v-if="option.series.length>0">
    <view >訂單金額柱狀圖</view>
    <l-echart v-if="option.series.length>0" ref="chart2" @finished="init"></l-echart>
  </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

export default {
  props: {
    dataSet: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      option: {
        title: {
          text: ""
        },
        legend: {
          type: 'scroll',
          show: true,
          // x: 'right',
          x: 'right',
          y: 'top',
          // data: ['betate', '贝塔'],
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: 'category',
          name: "时间",
        },
        yAxis: {
          type: 'value',
          name: '訂單金額'
        },
        series: [{
          type: 'bar',
        }]
      }
    }
  },
  // watch: {
  //   dataSet: {
  //     deep: true, // 深度监听对象内部属性的变化
  //     handler: function (newData) {
  //       // console.log('e1');
  //       // this.updateChart()
  //       // this.init()
  //       // this.$refs.chart.init(echarts, chart => {
  //       // 	chart.setOption(this.option);
  //       // });
  //     }
  //   }
  // },
  methods: {
    async init() {
      // chart 图表实例不能存在data里
      this.updateChart()
      const chart = await this.$refs.chart2.init(echarts);
      chart.setOption(this.option)

      // this.$refs.chart2.init(echarts, chart => {
      //   chart.setOption(this.option);
      // });
    },
    updateChart() {
      this.option.dataset = this.dataSet;
      let series = [];
      for (let item of this.dataSet.dimensions) {
        if (item != "time") {
          series.push({
            type: 'bar'
          })
        }
      }
      this.option.series = series;
    }
  },
  mounted() {
    console.log(this.dataSet, 'data');
    this.updateChart()
    this.$refs.chart2.init(echarts, chart => {
      chart.setOption(this.option);
    });
  }
}
</script>
